<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org" th:with="title='注册',active='index'"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- head 头部-->
<head th:replace="web/common/fragment::head(${title},null,'/assets/css/login.css')"></head>
<style>
	body{
		line-height: 24px;
		margin-top: 0px !important;
	}
</style>
<body>
<div class="login-body">
	<form class=" layui-form layui-card-body layui-form-pane">
		<div class="layui-form-item">
			<label class="layui-form-label required"><i class="layui-icon layui-icon-username"></i></label>
			<div class="layui-input-block">
				<input class="layui-input" lay-verify="username" placeholder="用户名" id="pop-username" type="text" required>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label required"><i class="layui-icon ali-icon-youxiang"></i></label>
			<div class="layui-input-block">
				<input class="layui-input" lay-verify="email" id="pop-mail" type="text" placeholder="邮箱号">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label required"><i class="layui-icon layui-icon-password"></i></label>
			<div class="layui-input-block">
				<input lay-verify="pass" class="layui-input" id="pop-password" placeholder="设置您的密码" type="password">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label required"><i class="layui-icon layui-icon-password"></i></label>
			<div class="layui-input-block">
				<input lay-verify="pass" class="layui-input" id="pop-password2" placeholder="重复您的密码" type="password">
			</div>
		</div>
		<div class="layui-form-item">
			<div id="slider"></div>
		</div>

		<div class="reg-doc">
			<input type="checkbox" id="reg-doc" lay-skin="primary" checked="">
			<span>我已经仔细阅读并接受<a href="/page/userProtocol" target="_blank">《用户服务条款》</a></span>
		</div>
		<div class="login-btn">
			<span lay-submit class="reg opacity" lay-filter="reg" onclick="pop_reg();">注册</span>
			<span lay-submit class="login opacity" onclick="pop_login();">登陆</span>
		</div>
	</form>
</div>
<!--	引入JS	-->
<div th:replace="web/common/fragment::js"></div>

<script>
    layui.use(['form','sliderVerify'], function(){
        var form = layui.form;
        var $ = layui.jquery;
		var sliderVerify = layui.sliderVerify;

        var slider = sliderVerify.render({
            elem:'#slider'
        });

        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
                if(value.length<4){
                    return '用户名的长度不得小于4';
				}

            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });
        form.on('submit(reg)', function(data){
            if(slider.isOk()){
                if($('#pop-password').val()!=$('#pop-password2').val()){
                    B.error("两次密码不一样");
                    return;
				}
                var param={
                    userName:$('#pop-username').val(),
					userPwd:$('#pop-password').val(),
					email:$('#pop-mail').val()
				}
				B.post({
					url:'/register',
					data:param,
					loading:true,
					success:function (result) {
						if(result.success){

						    parent.layer.closeAll();
                            B.info(result.msg);
						}else{
						    B.error(result.msg);
						}
                    }
				})
			}
		});

    })

</script>

<script>

</script>


</body>
</html>
